<template>
	<view>
		<view class="cart" v-if="cart.length > 0">
			<my-address></my-address>

			<!-- 商品列表区域 -->
			<view class="goodsList">
				<view class="mytitle">
					<uni-icons class="myicon" type="shop" size="20"></uni-icons>
					购物车
				</view>

				<!-- 商品 -->
				<uni-swipe-action>
					<uni-swipe-action-item :right-options="options" @click='deleteClick(item.goods_id)'
						v-for="(item, index) in cart" :key="index">
						<my-goods @changeRadio="mychangeRadio" @changeNumber='mychangeNumber' :showRadio='true'
							:item="item"></my-goods>
					</uni-swipe-action-item>
				</uni-swipe-action>

			</view>

			<!-- 结算组件 -->
			<my-total></my-total>
		</view>

		<view class="nocart" v-else>
			<image src="../../static/tabs/cart_empty@2x.png" mode=""></image>
			<text>毛都没有~~~</text>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import mymixins from '../../mixins/index.js'

	export default {
		mixins: [mymixins],
		computed: {
			...mapState('cart', ['cart'])
		},
		data() {
			return {
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#c00000'
					}
				}]
			};
		},
		methods: {
			...mapMutations('cart',
				['changeRadio', 'changeNumber', 'deleteBuyCar']
			),
			mychangeRadio(obj) {
				this.changeRadio(obj)
			},
			mychangeNumber(obj) {
				this.changeNumber(obj)
			},
			deleteClick(id) {
				uni.showModal({
					title: '吊毛',
					content: '要删掉吗',
					success: res => {
						if (res.confirm) {
							this.deleteBuyCar(id)

						}
					}
				})
			}
		}

	}
</script>

<style lang="scss">
	.cart {
		padding-bottom: 100rpx;

		.goodsList {
			.mytitle {
				padding-left: 20rpx;
				font-size: 14px;
				line-height: 70rpx;
				border-bottom: 1px solid #edeeed;

				.myicon {
					margin-right: 20rpx;
				}
			}
		}
	}

	.nocart {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 350rpx;

		image {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 40rpx;
		}

		text {
			color: #a7a7a7;
			font-size: 14px;
		}
	}
</style>
